<template>
	<view >
		<uni-table :border='true' :stripe='true' emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr style=" background-color: #e9e9e9;">
				<uni-td class="row-title" width="120"></uni-td>
				<uni-td v-for="(item,index) in items" :key="index" class="row-title">
					{{item.value}}
				</uni-td>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in DtlAudiSVListA " :key="index">
				<uni-td style="font-size: 9rpx;">{{item.CarSvrItemName}}</uni-td>
				<uni-td style="font-size: 9rpx;">{{item.CarSVIPriceA}}</uni-td>
				<uni-td style="font-size: 9rpx;">{{item.CarSVIPriceB}}</uni-td>
				<uni-td style="font-size: 9rpx;">{{item.CarSVIPriceC}}</uni-td>
				
			</uni-tr>
			<uni-tr style=" background-color: #e9e9e9;">
				<uni-td class="row-title" width="120">选择</uni-td>
				<uni-td v-for="(item,index) in items" :key="index"><radio style="padding-left: 20rpx;" :value="item.value" :checked="item.value==radioValue" @click="radioCheck(index)"></radio></uni-td>
			</uni-tr>
		</uni-table>
		<view v-if="radioValue!=''&&radioValue!=null" style="text-align: right; color: red; font-size: 30rpx; margin-right: 15rpx;">
			已选择：<text style="color: black;">{{radioValue}}</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items:[
				    {value:'优享保障服务',id:'1'},
				    {value:'畅享保障服务',id:'2'},
				    {value:'尊享保障服务',id:'3'}
				],
				radioValue:'',
				//服务项目1
				DtlAudiSVListA: [{
						UID: 1230,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '保漳理赔范夏内的全额车损(不含轮胎)', //项目名称
						CarSVIPriceA: '￥1290', //费用[优享保漳服务]
						CarSVIPriceB: '￥1500', //费用[畅事保障服务]
						CarSVIPriceC: '￥1880' //费用[尊事保障服务]
					},
					{
						UID: 1235,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '无需承担车辆经营损失天数', //项目名称
						CarSVIPriceA: '2天', //费用[优享保漳服务]
						CarSVIPriceB: '7天', //费用[畅事保障服务]
						CarSVIPriceC: '10天' //费用[尊事保障服务]
					},
					{
						UID: 1235,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '单方事故巨本车车损低于5000元(含) 时，无需提供理赔资料', //项目名称
						CarSVIPriceA: '￥20', //费用[优享保漳服务]
						CarSVIPriceB: '￥80', //费用[畅事保障服务]
						CarSVIPriceC: '￥100' //费用[尊事保障服务]
					},
					{
						UID: 1236,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '三青保障金额', //项目名称
						CarSVIPriceA: '￥100万', //费用[优享保漳服务]
						CarSVIPriceB: '￥200万', //费用[畅事保障服务]
						CarSVIPriceC: '￥300万' //费用[尊事保障服务]
					},
					{
						UID: 1239,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '司乘每座意外保障全额', //项目名称
						CarSVIPriceA: '￥1万', //费用[优享保漳服务]
						CarSVIPriceB: '￥6万', //费用[畅事保障服务]
						CarSVIPriceC: '￥9万' //费用[尊事保障服务]
					},
					{
						UID: 1251,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '价格', //项目名称
						CarSVIPriceA: '￥580次', //费用[优享保漳服务]
						CarSVIPriceB: '￥980次', //费用[畅事保障服务]
						CarSVIPriceC: '￥1280次' //费用[尊事保障服务]
					}
				],
				
				//服务项目2
				DtlAudiSVListB: [{
						UID: 4781,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '上门取送服务', //项目名称
						CarSVIPriceA: '2次', //费用[优享保漳服务]
						CarSVIPriceB: '2次', //费用[畅事保障服务]
						CarSVIPriceC: '2次' //费用[尊事保障服务]
					},
					{
						UID: 4787,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '上门取送服务', //项目名称
						CarSVIPriceA: '￥70次', //费用[优享保漳服务]
						CarSVIPriceB: '￥70次', //费用[畅事保障服务]
						CarSVIPriceC: '￥70次' //费用[尊事保障服务]
					},
					{
						UID: 4787,
						CarModelName: 'Q3 e-tron', //车系
						CarSvrItemName: '夜间上门取送服务', //项目名称
						CarSVIPriceA: '￥100次', //费用[优享保漳服务]
						CarSVIPriceB: '￥100次', //费用[畅事保障服务]
						CarSVIPriceC: '￥100次' //费用[尊事保障服务]
					}
				
				]
			}
		},
		methods: {
			radioCheck (index) {
			           this.items.forEach((item =>{
			               item.isCheck = false
			           }))
			           if(this.radioValue==this.items[index].value) {
			               this.radioValue =null
			           }else {
			              this.radioValue = this.items[index].value
			           }
			           console.log(this.radioValue)
			       }
		
		}
	}
</script>
<style>
 .row-title
 {
	 border: none;
	 font-size: 7rpx;
 }
</style>